<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input placeholder="请输入员工名进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                              clearable
                              @clear="initEmps"
                              style="width: 350px;margin-right: 10px" v-model="keyword"
                              @keydown.enter.native="initEmps" :disabled="showAdvanceSearchView"></el-input>
                    <el-button icon="el-icon-search" type="primary" @click="initEmps" :disabled="showAdvanceSearchView">
                        搜索
                    </el-button>
                    <!--                    <el-button type="primary" @click="showAdvanceSearchView = !showAdvanceSearchView">-->
                    <!--                        <i :class="showAdvanceSearchView?'fa fa-angle-double-up':'fa fa-angle-double-down'"-->
                    <!--                           aria-hidden="true"></i>-->
                    <!--                        高级搜索-->
                    <!--                    </el-button>-->
                </div>
                <div>
                    <el-button type="primary" icon="el-icon-suitcase" @click="showDepMng"
                               style="display: inline-flex;margin-right: 8px">
                        部门管理
                    </el-button>
                    <el-upload
                            :show-file-list="false"
                            :before-upload="beforeUpload"
                            :on-success="onSuccess"
                            :on-error="onError"
                            :disabled="importDataDisabled"
                            style="display: inline-flex;margin-right: 8px"
                            action="/employee/basic/import">
                        <el-button :disabled="importDataDisabled" type="success" :icon="importDataBtnIcon">
                            {{importDataBtnText}}
                        </el-button>
                    </el-upload>
                    <!--                    <el-button type="success" @click="exportData" icon="el-icon-download">-->
                    <!--                        导出数据-->
                    <!--                    </el-button>-->
                </div>
            </div>
            <transition name="slide-fade">
                <div v-show="showAdvanceSearchView"
                     style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0px;">
                    <el-row>
                        <el-col :span="5">
                            政治面貌:
                            <el-select v-model="searchValue.politicId" placeholder="政治面貌" size="mini"
                                       style="width: 130px;">
                                <el-option
                                        v-for="item in politicsstatus"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <!--                        <el-col :span="4">-->
                        <!--                            民族:-->
                        <!--                            <el-select v-model="searchValue.nationId" placeholder="民族" size="mini"-->
                        <!--                                       style="width: 130px;">-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in nations"-->
                        <!--                                        :key="item.id"-->
                        <!--                                        :label="item.name"-->
                        <!--                                        :value="item.id">-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </el-col>-->
                        <el-col :span="4">
                            职位:
                            <el-select v-model="searchValue.posId" placeholder="职位" size="mini" style="width: 130px;">
                                <el-option
                                        v-for="item in positions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <!--                        <el-col :span="4">-->
                        <!--                            职称:-->
                        <!--                            <el-select v-model="searchValue.jobLevelId" placeholder="职称" size="mini"-->
                        <!--                                       style="width: 130px;">-->
                        <!--                                <el-option-->
                        <!--                                        v-for="item in joblevels"-->
                        <!--                                        :key="item.id"-->
                        <!--                                        :label="item.name"-->
                        <!--                                        :value="item.id">-->
                        <!--                                </el-option>-->
                        <!--                            </el-select>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col :span="7">-->
                        <!--                            聘用形式:-->
                        <!--                            <el-radio-group v-model="searchValue.engageForm">-->
                        <!--                                <el-radio label="劳动合同">劳动合同</el-radio>-->
                        <!--                                <el-radio label="劳务合同">劳务合同</el-radio>-->
                        <!--                            </el-radio-group>-->
                        <!--                        </el-col>-->
                    </el-row>
                    <el-row style="margin-top: 10px">
                        <el-col :span="5">
                            所属部门:
                            <el-popover
                                    placement="right"
                                    title="请选择部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="popVisible2">
                                <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                         @node-click="searvhViewHandleNodeClick"></el-tree>
                                <div slot="reference"
                                     style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                                     @click="showDepView2">{{inputDepName}}
                                </div>
                            </el-popover>
                        </el-col>
                        <el-col :span="8">
                            入职日期:
                            <el-date-picker
                                    v-model="searchValue.beginDateScope"
                                    type="daterange"
                                    size="mini"
                                    unlink-panels
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="5" :offset="4">
                            <el-button size="mini">取消</el-button>
                            <el-button size="mini" icon="el-icon-search" type="primary" @click="initEmps('advanced')">
                                搜索
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
            </transition>
        </div>
        <div style="margin-top: 10px">
            <el-table
                    :data="emps"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="正在加载..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>


                <el-table-column
                        prop="archive.name"
                        fixed
                        align="left"
                        label="姓名"
                        width="90">
                </el-table-column>

                <el-table-column
                        prop="dep"
                        fixed
                        align="left"
                        label="部门"
                        width="120"
                        :filters=this.allDeps
                        :filter-method="filterTag"
                        filter-placement="bottom-end">
                </el-table-column>

                <el-table-column
                        prop="archive.id"
                        align="left"
                        label="id"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="archive.sex"
                        align="left"
                        label="性别"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="archive.age"
                        align="left"
                        label="年龄"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="archive.mail"
                        align="left"
                        label="邮箱"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="archive.intro"
                        align="left"
                        label="介绍"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="archive.date"
                        align="left"
                        label="入职时间"
                        width="220">
                </el-table-column>
                <el-table-column
                        prop="archive.policy"
                        align="left"
                        label="政治面貌"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="archive.area"
                        align="left"
                        label="住址"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="archive.degree"
                        align="left"
                        label="学位"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="archive.school"
                        align="left"
                        label="毕业院校"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="archive.major"
                        align="left"
                        label="专业"
                        width="150">
                </el-table-column>


                <!--                <el-table-column-->
                <!--                        prop="name"-->
                <!--                        fixed-->
                <!--                        align="left"-->
                <!--                        label="姓名"-->
                <!--                        width="90">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="workID"-->
                <!--                        label="工号"-->
                <!--                        align="left"-->
                <!--                        width="85">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="gender"-->
                <!--                        label="性别"-->
                <!--                        align="left"-->
                <!--                        width="85">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="birthday"-->
                <!--                        width="95"-->
                <!--                        align="left"-->
                <!--                        label="出生日期">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="idCard"-->
                <!--                        width="150"-->
                <!--                        align="left"-->
                <!--                        label="身份证号码">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="wedlock"-->
                <!--                        width="70"-->
                <!--                        label="婚姻状况">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="nation.name"-->
                <!--                        width="50"-->
                <!--                        label="民族">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="nativePlace"-->
                <!--                        width="80"-->
                <!--                        label="籍贯">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="politicsstatus.name"-->
                <!--                        label="政治面貌">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="email"-->
                <!--                        width="180"-->
                <!--                        align="left"-->
                <!--                        label="电子邮件">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="phone"-->
                <!--                        width="100"-->
                <!--                        align="left"-->
                <!--                        label="电话号码">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="address"-->
                <!--                        width="220"-->
                <!--                        align="left"-->
                <!--                        label="联系地址">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="department.name"-->
                <!--                        width="100"-->
                <!--                        align="left"-->
                <!--                        label="所属部门">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="position.name"-->
                <!--                        width="100"-->
                <!--                        label="职位">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="jobLevel.name"-->
                <!--                        width="100"-->
                <!--                        label="职称">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="engageForm"-->
                <!--                        width="100"-->
                <!--                        align="left"-->
                <!--                        label="聘用形式">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="tiptopDegree"-->
                <!--                        width="80"-->
                <!--                        align="left"-->
                <!--                        label="最高学历">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="specialty"-->
                <!--                        width="150"-->
                <!--                        align="left"-->
                <!--                        label="专业">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="school"-->
                <!--                        width="150"-->
                <!--                        align="left"-->
                <!--                        label="毕业院校">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="beginDate"-->
                <!--                        width="95"-->
                <!--                        align="left"-->
                <!--                        label="入职日期">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="conversionTime"-->
                <!--                        width="95"-->
                <!--                        align="left"-->
                <!--                        label="转正日期">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="beginContract"-->
                <!--                        width="95"-->
                <!--                        align="left"-->
                <!--                        label="合同起始日期">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        prop="endContract"-->
                <!--                        width="95"-->
                <!--                        align="left"-->
                <!--                        label="合同截止日期">-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                        width="100"-->
                <!--                        align="left"-->
                <!--                        label="合同期限">-->
                <!--                    <template slot-scope="scope">-->
                <!--                        <el-tag>{{scope.row.contractTerm}}</el-tag>-->
                <!--                        年-->
                <!--                    </template>-->
                <!--                </el-table-column>-->

                <el-table-column
                        fixed="right"
                        width="200"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini">编辑</el-button>
                        <el-button @click="showMoreInfo(scope.row)" style="padding: 3px" size="mini" type="primary">
                            查看高级资料
                        </el-button>
                        <!--                        <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!--        编辑员工资料-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form :model="emp" ref="empForm">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="id:" prop="id">
                                <el-input disabled size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.id"
                                          placeholder="员工id"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="姓名:" prop="name">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.name"
                                          placeholder="请输入员工姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="性别:" prop="sex">
                                <el-radio-group v-model="emp.archive.sex">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>

                        <el-col :span="7">
                            <el-form-item label="入职时间:" prop="date">
                                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.date"
                                          placeholder="请输入入职时间"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="学位:" prop="degree">
                                <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.degree" placeholder="请输入学位"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="政治面貌:" prop="policy">
                                <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.policy" placeholder="请输入政治面貌"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮箱:" prop="email">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-message"
                                          v-model="emp.archive.mail" placeholder="请输入电子邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="联系地址:" prop="area">
                                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.area" placeholder="请输入联系地址"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="年龄:" prop="age">
                                <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.age" placeholder="请输入年龄"></el-input>
                            </el-form-item>
                        </el-col>
                        <!--                        <el-col :span="5">-->
                        <!--                            <el-form-item label="职称:" prop="jobLevelId">-->
                        <!--                                <el-select v-model="emp.archive.jobLevelId" placeholder="职称" size="mini" style="width: 150px;">-->
                        <!--                                    <el-option-->
                        <!--                                            v-for="item in joblevels"-->
                        <!--                                            :key="item.id"-->
                        <!--                                            :label="item.name"-->
                        <!--                                            :value="item.id">-->
                        <!--                                    </el-option>-->
                        <!--                                </el-select>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col :span="6">-->
                        <!--                            <el-form-item label="职位:" prop="posId">-->
                        <!--                                <el-select v-model="emp.posId" placeholder="职位" size="mini" style="width: 150px;">-->
                        <!--                                    <el-option-->
                        <!--                                            v-for="item in positions"-->
                        <!--                                            :key="item.id"-->
                        <!--                                            :label="item.name"-->
                        <!--                                            :value="item.id">-->
                        <!--                                    </el-option>-->
                        <!--                                </el-select>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col :span="5">-->
                        <!--                            <el-form-item label="职称:" prop="jobLevelId">-->
                        <!--                                <el-select v-model="emp.jobLevelId" placeholder="职称" size="mini" style="width: 150px;">-->
                        <!--                                    <el-option-->
                        <!--                                            v-for="item in joblevels"-->
                        <!--                                            :key="item.id"-->
                        <!--                                            :label="item.name"-->
                        <!--                                            :value="item.id">-->
                        <!--                                    </el-option>-->
                        <!--                                </el-select>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <el-col :span="5">
                            <el-form-item label="所属部门:" prop="departmentId">
                                <!--                                <el-popover-->
                                <!--                                        placement="right"-->
                                <!--                                        title="请选择部门"-->
                                <!--                                        width="200"-->
                                <!--                                        trigger="manual"-->
                                <!--                                        v-model="popVisible">-->
                                <!--                                    <el-tree default-expand-all :data="allDeps" :props="defaultProps"-->
                                <!--                                             :expand-on-click-node="false"-->
                                <!--                                             @node-click="handleNodeClick"></el-tree>-->
                                <!--                                    <div slot="reference"-->
                                <!--                                         style="width: 150px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"-->
                                <!--                                         @click="showDepView">{{inputDepName}}-->
                                <!--                                    </div>-->
                                <!--                                </el-popover>-->
                                <el-input size="mini" style="width: 120px" prefix-icon="el-icon-edit"
                                          v-model="emp.dep" placeholder="部门名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="电话号码:" prop="tel">
                                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-phone"
                                          v-model="emp.archive.tel" placeholder="电话号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <!--                        <el-col :span="6">-->
                        <!--                            <el-form-item label="工号:" prop="workID">-->
                        <!--                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"-->
                        <!--                                          v-model="emp.workID" placeholder="工号" disabled></el-input>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <el-col :span="6">
                            <el-form-item label="学历:" prop="tiptopDegree">
                                <el-select v-model="emp.archive.tiptopDegree" placeholder="学历" size="mini"
                                           style="width: 150px;">
                                    <el-option
                                            v-for="item in tiptopDegrees"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="毕业院校:" prop="school">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.school" placeholder="毕业院校名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="专业名称:" prop="major">
                                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                                          v-model="emp.archive.major" placeholder="请输入专业名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="个人介绍:" prop="intro" style="width: 92%">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="emp.archive.intro">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="特长介绍:" prop="talents" style="width: 35%">

                        <el-table
                                :data="emp.archive.talents"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="特长项目"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="level"
                                    label="水平">
                            </el-table-column>
                        </el-table>


                        <!--                        <div v-for="(value, key, index) in emp.talents" >-->

                        <!--&lt;!&ndash;                            <div :span="7">&ndash;&gt;-->
                        <!--&lt;!&ndash;                                特长：{{value.name}}&ndash;&gt;-->
                        <!--&lt;!&ndash;                            </div>&ndash;&gt;-->
                        <!--&lt;!&ndash;                            <div :span="7">&ndash;&gt;-->
                        <!--&lt;!&ndash;                                水平:{{value.level}}&ndash;&gt;-->
                        <!--&lt;!&ndash;                            </div>&ndash;&gt;-->

                        <!--                        </div>-->

                    </el-form-item>

                    <el-form-item label="历史就职:" prop="positions" style="width: 97%">

                        <el-table
                                :data="position"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="职位名称"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="salary"
                                    label="薪资"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="company.name"
                                    label="公司"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="department.name"
                                    label="部门"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="start"
                                    label="开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="end"
                                    label="结束时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="100">
                                <template slot-scope="scope">
                                    <el-button @click="editPosition(scope.row)" type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-form-item>

                    <el-form-item label="员工事迹:" prop="deeds" style="width: 97%">

                        <el-table
                                :data="emp.archive.deeds"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="名称"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="role"
                                    label="角色"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="details"
                                    label="明细"
                                    width="400">
                            </el-table-column>
                            <el-table-column
                                    prop="start"
                                    label="开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="end"
                                    label="结束时间"
                                    width="200">
                            </el-table-column>
                        </el-table>

                    </el-form-item>

                    <el-form-item label="相关评价:" prop="evaluates" style="width: 97%;">

                        <el-table
                                :data="emp.archive.evaluates"
                                style="width: 100%">
                            <el-table-column
                                    prop="role"
                                    label="角色"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="commenter.archive.name"
                                    label="评论员"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="grade"
                                    label="评分"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="content"
                                    label="评价"
                                    width="450">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="150">
                                <template slot-scope="scope">
                                    <!--                                    <el-button @click="moreEvaluate(scope.row)" type="text" size="small">查看</el-button>-->
                                    <el-button @click="showEditEvaluate(scope.row)" type="text" size="small">编辑
                                    </el-button>
                                    <el-button @click="deleteEvaluate(scope.row)" type="text" size="small">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>


                    </el-form-item>
                    <div style="margin-top: 20px;margin-left: 75px;">
                        <el-button @click="showAddEvaluate()">新增评价</el-button>
                    </div>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 定</el-button>
            </span>
        </el-dialog>

        <!--        高级员工资料-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible2"
                width="80%">
            <div>
                <el-form :model="emp" ref="empForm">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="id:" prop="id">
                                <div>{{emp.archive.id}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="姓名:" prop="name">
                                <div>{{emp.archive.name}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="性别:" prop="sex">
                                <div>{{emp.archive.sex}}</div>
                            </el-form-item>
                        </el-col>

                        <el-col :span="7">
                            <el-form-item label="入职时间:" prop="date">
                                <div>{{emp.archive.date}}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="学位:" prop="degree">
                                <div>{{emp.archive.degree}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="政治面貌:" prop="policy">
                                <div>{{emp.archive.policy}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮箱:" prop="email">
                                <div>{{emp.archive.mail}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="联系地址:" prop="area">
                                <div>{{emp.archive.area}}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="年龄:" prop="age">
                                <div>{{emp.archive.age}}</div>
                            </el-form-item>
                        </el-col>
                        <!--                        <el-col :span="5">-->
                        <!--                            <el-form-item label="职称:" prop="jobLevelId">-->
                        <!--                                <el-select v-model="emp.jobLevelId" placeholder="职称" size="mini" style="width: 150px;">-->
                        <!--                                    <el-option-->
                        <!--                                            v-for="item in joblevels"-->
                        <!--                                            :key="item.id"-->
                        <!--                                            :label="item.name"-->
                        <!--                                            :value="item.id">-->
                        <!--                                    </el-option>-->
                        <!--                                </el-select>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col :span="6">-->
                        <!--                            <el-form-item label="所属部门:" prop="departmentId">-->
                        <!--                                <el-popover-->
                        <!--                                        placement="right"-->
                        <!--                                        title="请选择部门"-->
                        <!--                                        width="200"-->
                        <!--                                        trigger="manual"-->
                        <!--                                        v-model="popVisible">-->
                        <!--                                    <el-tree default-expand-all :data="allDeps" :props="defaultProps"-->
                        <!--                                             :expand-on-click-node="false"-->
                        <!--                                             @node-click="handleNodeClick"></el-tree>-->
                        <!--                                    <div slot="reference"-->
                        <!--                                         style="width: 150px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"-->
                        <!--                                         @click="showDepView">{{inputDepName}}-->
                        <!--                                    </div>-->
                        <!--                                </el-popover>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <el-col :span="5">
                            <el-form-item label="电话号码:" prop="tel">
                                <div>{{emp.archive.tel}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业院校:" prop="school">
                                <div>{{emp.archive.school}}</div>

                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="专业名称:" prop="major">
                                <div>{{emp.archive.major}}</div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>

                        <!--                        <el-col :span="6">-->
                        <!--                            <el-form-item label="学历:" prop="tiptopDegree">-->
                        <!--                                <el-select v-model="emp.tiptopDegree" placeholder="学历" size="mini"-->
                        <!--                                           style="width: 150px;">-->
                        <!--                                    <el-option-->
                        <!--                                            v-for="item in tiptopDegrees"-->
                        <!--                                            :key="item"-->
                        <!--                                            :label="item"-->
                        <!--                                            :value="item">-->
                        <!--                                    </el-option>-->
                        <!--                                </el-select>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col :span="6">-->
                        <!--                            <el-form-item label="毕业院校:" prop="school">-->
                        <!--                                <div>{{emp.school}}</div>-->

                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <!--                        <el-col :span="7">-->
                        <!--                            <el-form-item label="专业名称:" prop="major">-->
                        <!--                                <div>{{emp.major}}</div>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                    </el-row>

                    <el-form-item label="个人介绍:" prop="intro" style="width: 92%">
                        <div>{{emp.archive.intro}}</div>
                        <!--                        <el-input-->
                        <!--                                type="textarea"-->
                        <!--                                :rows="2"-->
                        <!--                                placeholder="请输入内容"-->
                        <!--                                v-model="emp.intro">-->
                        <!--                        </el-input>-->
                    </el-form-item>

                    <el-form-item label="特长介绍:" prop="talents" style="width: 35%">

                        <el-table
                                :data="emp.archive.talents"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="特长项目"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="level"
                                    label="水平">
                            </el-table-column>
                        </el-table>


                    </el-form-item>

                    <el-form-item label="历史就职:" prop="positions" style="width: 97%">

                        <el-table
                                :data="position"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="职位名称"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="salary"
                                    label="薪资"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="company.name"
                                    label="公司"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="department.name"
                                    label="部门"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="start"
                                    label="开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="end"
                                    label="结束时间"
                                    width="200">
                            </el-table-column>
                        </el-table>

                    </el-form-item>

                    <el-form-item label="员工事迹:" prop="deeds" style="width: 97%">

                        <el-table
                                :data="emp.archive.deeds"
                                style="width: 100%">
                            <el-table-column
                                    prop="name"
                                    label="名称"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="role"
                                    label="角色"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="details"
                                    label="明细"
                                    width="400">
                            </el-table-column>
                            <el-table-column
                                    prop="start"
                                    label="开始时间"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="end"
                                    label="结束时间"
                                    width="200">
                            </el-table-column>
                        </el-table>

                    </el-form-item>

                    <el-form-item label="相关评价:" prop="evaluates" style="width: 97%">

                        <el-table
                                :data="emp.archive.evaluates"
                                style="width: 100%">
                            <el-table-column
                                    prop="role"
                                    label="角色"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="commenter.archive.name"
                                    label="评论员"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="grade"
                                    label="评分"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="content"
                                    label="评价"
                                    width="600">
                            </el-table-column>
                        </el-table>

                    </el-form-item>


                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 定</el-button>
            </span>
        </el-dialog>

        <!--        修改职位-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisibleEP"
                width="80%">
            <div>
                <el-form :model="editPst" ref="empForm">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="职位id:" prop="id">
                                <el-input disabled size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="editPst.id"
                                          placeholder="职位id"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="部门id:" prop="departmentId">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="editPst.department.id"
                                          placeholder="请输入部门id"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="薪水:" prop="salary">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="editPst.salary"
                                          placeholder="请输入薪水"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="职称:" prop="name">
                                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                                          v-model="editPst.name"
                                          placeholder="请输入职称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="特权:" prop="privilege">
                                <el-input size="mini" style="width: 200px" prefix-icon="el-icon-edit"
                                          v-model="editPst.privilege"
                                          placeholder="请输入特权(“管理”或不填）"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="开始时间:" prop="start">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="editPst.start"
                                          placeholder="请输入开始时间"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束时间:" prop="end">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="editPst.end"
                                          placeholder="请输入结束时间"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleEP = false">取 消</el-button>
                <el-button type="primary" @click="doEditPosition">确 定</el-button>
            </span>
        </el-dialog>

        <!--        添加评价-->
        <el-dialog
                :visible.sync="dialogVisibleAddEvl"
                width="50%">
            <div>
                <el-form :model="evaluate" ref="empForm">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="角色:" prop="role">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="evaluate.role"
                                          placeholder="请输入角色"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="评分:" prop="grade">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="evaluate.grade"
                                          placeholder="请输入评分"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-form-item label="评价:" prop="date">
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入评价"
                                v-model="evaluate.content">
                        </el-input>
                    </el-form-item>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAddEvl = false">取 消</el-button>
                <el-button type="primary" @click="addEvaluate">确 定</el-button>
            </span>
        </el-dialog>

        <!--        编辑评价-->
        <el-dialog
                :visible.sync="dialogVisibleEditEvl"
                width="50%">
            <div>
                <el-form :model="evaluate" ref="empForm">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="id:" prop="id">
                                <el-input disabled size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="evaluate.id"
                                          placeholder="请输入id"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="角色:" prop="role">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="evaluate.role"
                                          placeholder="请输入角色"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="评分:" prop="grade">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="evaluate.grade"
                                          placeholder="请输入评分"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-form-item label="评价:" prop="date">
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入评价"
                                v-model="evaluate.content">
                        </el-input>
                    </el-form-item>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleEditEvl = false">取 消</el-button>
                <el-button type="primary" @click="editEvaluate">确 定</el-button>
            </span>
        </el-dialog>

        <!--        部门管理-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisibleDM"
                width="80%">
            <div>
                <el-form :model="deps" ref="empForm">

                    <el-form-item label="部门列表:" prop="evaluates" style="width: 97%;">

                        <el-table
                                :data="deps"
                                style="width: 100%">
                            <el-table-column
                                    prop="id"
                                    label="部门id"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="部门名称"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="intro"
                                    label="部门介绍"
                            >
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="150">
                                <template slot-scope="scope">
                                    <!--                                    <el-button @click="moreEvaluate(scope.row)" type="text" size="small">查看</el-button>-->
                                    <el-button @click="showEditDM(scope.row)" type="text" size="small">编辑
                                    </el-button>
                                    <el-button @click="deleteDM(scope.row)" type="text" size="small">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-form-item>
                    <div style="margin-top: 20px;margin-left: 75px;">
                        <el-button @click="showAddDM()">新增部门</el-button>
                    </div>

                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleDM = false">取 消</el-button>
                <el-button type="primary" @click="editEvaluate">确 定</el-button>
            </span>
        </el-dialog>

        <!--        添加DM-->
        <el-dialog
                :visible.sync="dialogVisibleAddDM"
                width="50%">
            <div>
                <el-form :model="dm" ref="empForm">
                    <el-row>
                        <!--                        <el-col :span="8">-->
                        <!--                            <el-form-item label="部门id:" prop="role">-->
                        <!--                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"-->
                        <!--                                          v-model="dm.id"-->
                        <!--                                          placeholder="请输入部门id"></el-input>-->
                        <!--                            </el-form-item>-->
                        <!--                        </el-col>-->
                        <el-col :span="5">
                            <el-form-item label="部门名称:" prop="grade">
                                <el-input size="mini" style="width: 250px" prefix-icon="el-icon-edit"
                                          v-model="dm.name"
                                          placeholder="请输入部门名称"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-form-item label="介绍:" prop="intro">
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入介绍"
                                v-model="dm.intro">
                        </el-input>
                    </el-form-item>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleAddDM = false">取 消</el-button>
                <el-button type="primary" @click="addDM">确 定</el-button>
            </span>
        </el-dialog>

        <!--        编辑DM-->
        <el-dialog
                :visible.sync="dialogVisibleEditDM"
                width="50%">
            <div>
                <el-form :model="dm" ref="empForm">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="id:" prop="id">
                                <el-input disabled size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="dm.id"
                                          placeholder="请输入id"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="部门名称:" prop="role">
                                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="dm.name"
                                          placeholder="请输入部门名称"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-form-item label="部门介绍:" prop="date">
                        <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入部门介绍"
                                v-model="dm.intro">
                        </el-input>
                    </el-form-item>
                </el-form>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleEditDM = false">取 消</el-button>
                <el-button type="primary" @click="editDM">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import axios from "axios";
    import {Message} from "element-ui";

    export default {
        name: "HrPer",
        data() {
            return {
                searchValue: {
                    politicId: null,
                    nationId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: null,
                    departmentId: null,
                    beginDateScope: null
                },
                title: '',
                importDataBtnText: '导入数据',
                importDataBtnIcon: 'el-icon-upload2',
                importDataDisabled: false,
                showAdvanceSearchView: false,
                allDeps: [],
                emps: [],
                deps: [],
                position: [],

                editPst: {
                    id: '',
                    department: {
                        id: null
                    },
                    salary: null,
                    end: '',
                    company: '',
                    name: '',
                    privilege: '',
                    start: '',
                },
                evaluate: {
                    id: null,
                    role: "",
                    content: "",
                    grade: null,
                },
                dm: {
                    id: null,
                    name: '',
                    intro: '',
                },


                currentId: null,

                loading: false,
                popVisible: false,
                popVisible2: false,
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisibleEP: false,

                // 添加评价
                dialogVisibleAddEvl: false,
                // 编辑评价
                dialogVisibleEditEvl: false,

                // 部门管理
                dialogVisibleDM: false,
                // 添加DM
                dialogVisibleAddDM: false,
                // 编辑DM
                dialogVisibleEditDM: false,


                total: 0,
                page: 1,
                keyword: '',
                size: 10,
                nations: [],
                joblevels: [],
                politicsstatus: [{
                    id: 1,
                    name: '党员'
                }, {
                    id: 2,
                    name: '团员'
                }, {
                    id: 3,
                    name: '群众'
                }],
                positions: [],
                tiptopDegrees: ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他'],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                inputDepName: '所属部门',
                emp: {
                    depId: null,
                    dep: "",
                    archive: {
                        id: null,
                        name: "",
                        sex: "",
                        mail: "xxx@abc.com",
                        intro: "xxxxxxx",
                        date: "2021-06-15T04:51:31.000+00:00",
                        pub: true,
                        tel: "xxxxxxxxx",
                        policy: "党员",
                        area: "xx",
                        degree: "学士",
                        school: "xx",
                        major: "xx",
                        age: 0,
                        talents: [],
                        positions: [],
                        deeds: [],
                        evaluates: []
                    },
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                rules: {
                    name: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
                    birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
                    idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'}, {
                        pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                        message: '身份证号码格式不正确',
                        trigger: 'blur'
                    }],
                    wedlock: [{required: true, message: '请输入婚姻状况', trigger: 'blur'}],
                    nationId: [{required: true, message: '请输入您组', trigger: 'blur'}],
                    nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
                    politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
                    email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'}, {
                        type: 'email',
                        message: '邮箱格式不正确',
                        trigger: 'blur'
                    }],
                    phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
                    address: [{required: true, message: '请输入员工地址', trigger: 'blur'}],
                    departmentId: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
                    jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
                    posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
                    engageForm: [{required: true, message: '请输入聘用形式', trigger: 'blur'}],
                    tiptopDegree: [{required: true, message: '请输入学历', trigger: 'blur'}],
                    specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
                    school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
                    beginDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
                    workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
                    workID: [{required: true, message: '请输入工号', trigger: 'blur'}],
                    contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
                    conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
                    notworkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
                    beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
                    endContract: [{required: true, message: '请输入合同结束日期', trigger: 'blur'}],
                    workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}],
                }
            }
        },
        mounted() {
            this.initEmps();
            // this.initData();
            // this.initPositions();
        },
        methods: {
            searvhViewHandleNodeClick(data) {
                this.inputDepName = data.name;
                this.searchValue.departmentId = data.id;
                this.popVisible2 = !this.popVisible2
            },
            onError(err, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
            },
            onSuccess(response, file, fileList) {
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
                this.initEmps();
            },
            beforeUpload() {
                this.importDataBtnText = '正在导入';
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataDisabled = true;
            },
            exportData() {
                window.open('/employee/basic/export', '_parent');
            },
            emptyEmp() {
                this.emp = {

                    id: null,
                    name: "",
                    sex: "",
                    mail: "xxx@abc.com",
                    intro: "xxxxxxx",
                    date: "2021-06-15T04:51:31.000+00:00",
                    pub: true,
                    tel: "xxxxxxxxx",
                    policy: "党员",
                    area: "xx",
                    degree: "学士",
                    school: "xx",
                    major: "xx",
                    age: 0,
                    talents: [],
                    positions: [],
                    deeds: [],
                    evaluates: []
                }
                this.inputDepName = '';
            },
            showEditEmpView(data) {
                this.title = '编辑员工信息';
                this.emp = data;
                console.log(this.emp);
                this.position = [];
                // console.log(this.position);
                data.archive.deeds.forEach(d => {
                    this.position.push(d.position);
                })

                // console.log(456765676567);
                // console.log(data);
                // console.log(this.position);

                this.currentId = data.id;
                this.dialogVisible = true;
            },
            showMoreInfo(data) {

                this.title = '更多员工信息';
                this.emp = data;

                this.position = [];
                data.archive.deeds.forEach(d => {
                    this.position.push(d.position);
                })

                this.dialogVisible2 = true;
            },
            deleteEmp(data) {
                this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/employee/basic/" + data.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddEmp() {
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                // if (this.emp.id) {
                //     this.$refs['empForm'].validate(valid => {
                //         if (valid) {
                //             this.putRequest("/employee/basic/", this.emp).then(resp => {
                //                 if (resp) {
                //                     this.dialogVisible = false;
                //                     this.initEmps();
                //                 }
                //             })
                //         }
                //     });
                // } else {
                //     this.$refs['empForm'].validate(valid => {
                //         if (valid) {
                //             this.postRequest("/employee/basic/", this.emp).then(resp => {
                //                 if (resp) {
                //                     this.dialogVisible = false;
                //                     this.initEmps();
                //                 }
                //             })
                //         }
                //     });
                // }
            },
            handleNodeClick(data) {
                this.inputDepName = data.name;
                this.emp.departmentId = data.id;
                this.popVisible = !this.popVisible
            },
            showDepView() {
                this.popVisible = !this.popVisible
            },
            showDepView2() {
                this.popVisible2 = !this.popVisible2
            },
            initPositions() {
                this.getRequest('/employee/basic/positions').then(resp => {
                    if (resp) {
                        this.positions = resp;
                    }
                })
            },
            getMaxWordID() {
                this.getRequest("/employee/basic/maxWorkID").then(resp => {
                    if (resp) {
                        this.emp.workID = resp.obj;
                    }
                })
            },
            initData() {
                if (!window.sessionStorage.getItem("nations")) {
                    this.getRequest('/employee/basic/nations').then(resp => {
                        if (resp) {
                            this.nations = resp;
                            window.sessionStorage.setItem("nations", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
                }
                if (!window.sessionStorage.getItem("joblevels")) {
                    this.getRequest('/employee/basic/joblevels').then(resp => {
                        if (resp) {
                            this.joblevels = resp;
                            window.sessionStorage.setItem("joblevels", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"));
                }
                if (!window.sessionStorage.getItem("politicsstatus")) {
                    this.getRequest('/employee/basic/politicsstatus').then(resp => {
                        if (resp) {
                            this.politicsstatus = resp;
                            window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"));
                }
                if (!window.sessionStorage.getItem("deps")) {
                    this.getRequest('/employee/basic/deps').then(resp => {
                        if (resp) {
                            this.allDeps = resp;
                            window.sessionStorage.setItem("deps", JSON.stringify(resp));
                        }
                    })
                } else {
                    this.allDeps = JSON.parse(window.sessionStorage.getItem("deps"));
                }
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initEmps();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initEmps('advanced');
            },
            showAddEmpView() {
                this.emptyEmp();
                this.title = '添加员工';
                this.getMaxWordID();
                this.dialogVisible = true;
            },
            initEmps(type) {
                this.allDeps = [];
                this.emps = [];

                this.loading = true;
                // let url = '/employee/basic/?page=' + this.page + '&size=' + this.size;
                let url = '/hr/per/get';
                // if (type && type == 'advanced') {
                //     if (this.searchValue.politicId) {
                //         url += '&politicId=' + this.searchValue.politicId;
                //     }
                //     if (this.searchValue.nationId) {
                //         url += '&nationId=' + this.searchValue.nationId;
                //     }
                //     if (this.searchValue.jobLevelId) {
                //         url += '&jobLevelId=' + this.searchValue.jobLevelId;
                //     }
                //     if (this.searchValue.posId) {
                //         url += '&posId=' + this.searchValue.posId;
                //     }
                //     if (this.searchValue.engageForm) {
                //         url += '&engageForm=' + this.searchValue.engageForm;
                //     }
                //     if (this.searchValue.departmentId) {
                //         url += '&departmentId=' + this.searchValue.departmentId;
                //     }
                //     if (this.searchValue.beginDateScope) {
                //         url += '&beginDateScope=' + this.searchValue.beginDateScope;
                //     }
                // } else {
                //     url += "&name=" + this.keyword;
                // }

                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));

                this.getRequest(url, {'cid': cid}).then(resp => {
                    this.loading = false;
                    if (resp) {
                        // console.log(resp.data);
                        this.deps = resp.data.departments;
                        // console.log(this.deps);
                        // this.total = resp.total;
                        this.deps.forEach(dep => {
                            this.allDeps.push({
                                value: dep.name,
                                text: dep.name,
                            }),

                                dep.archives.forEach(i => {
                                    // console.log(i);
                                    // if(i.)
                                    this.emps.push({
                                        archive: i,
                                        depId: dep.id,
                                        dep: dep.name,

                                    })
                                })

                        })

                        // console.log(1212121);
                        // console.log(this.emps);
                        // console.log(this.allDeps);
                    }
                });
            },
            // 过滤器
            filterTag(value, row) {
                return row.dep === value;
            },
            editPosition(data) {
                console.log(data);
                this.editPst = data;
                this.dialogVisibleEP = true;

                // console.log(this.editPst);
            },
            doEditPosition() {
                this.dialogVisibleEP = false;
                let url = '/hr/per/put';
                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));
                return axios({
                    method: 'put',
                    url: `${url}`,
                    params: {'cid': cid},
                    data: this.editPst,
                })

            },
            // 新增评价dlg
            showAddEvaluate() {
                // this.title = '添加员工';
                this.dialogVisibleAddEvl = true;
            },
            // 新增评价提交
            addEvaluate() {
                this.dialogVisibleAddEvl = false;
                let url = '/hr/per/eva/post';
                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));
                let u = JSON.parse(window.sessionStorage.getItem("user"));
                if (this.emp.archive.id == u.user.archive.id) {
                    Message.error({message: '自己无法评价自己!'})
                } else {

                    return axios({
                        method: 'post',
                        url: `${url}`,
                        params: {
                            'cid': cid,
                            'aid': this.emp.archive.id,
                        },
                        data: this.evaluate,
                    })
                }

            },
            // 评价详情
            moreEvaluate(data) {

            },
            // 编辑评价dlg
            showEditEvaluate(data) {
                this.dialogVisibleEditEvl = true;
                // console.log(data);
                this.evaluate.id = data.id;
                this.evaluate.role = data.role;
                this.evaluate.content = data.content;
                this.evaluate.grade = data.grade;
                // console.log(this.evaluate);
            },
            // 编辑评价
            editEvaluate(data) {
                // console.log(data);
                let url = '/hr/per/eva/put';
                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));
                return axios({
                    method: 'put',
                    url: `${url}`,
                    params: {
                        'cid': cid,
                    },
                    data: this.evaluate,
                });

            },
            // 删除评价
            deleteEvaluate(data) {
                // console.log(data);
                let url = '/hr/per/eva/delete';
                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));
                return axios({
                    method: 'delete',
                    url: `${url}`,
                    params: {
                        'cid': cid,
                        'eid': data.id,
                    }
                }).then(resp => {
                    if (resp.code == 400) {
                        Message.error({message: '无权限对此评价进行操作！'})
                    }
                });
            },
            //部门管理dlg
            showDepMng() {
                this.title = '部门管理';
                this.dialogVisibleDM = true;
            },


            // 新增DMdlg
            showAddDM() {
                // this.title = '添加员工';
                this.dialogVisibleAddDM = true;
            },
            // 新增DM提交
            addDM() {
                this.dialogVisibleAddDM = false;
                let url = '/hr/per/dep/post';
                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));

                return axios({
                    method: 'post',
                    url: `${url}`,
                    params: {
                        'cid': cid,
                    },
                    data: this.dm,
                })


            },
            // DM详情
            moreDM(data) {

            },
            // 编辑评价dlg
            showEditDM(data) {
                this.dialogVisibleEditDM = true;
                // console.log(data);
                this.dm.id = data.id;
                this.dm.name = data.name;
                this.dm.intro = data.intro;
                // console.log(this.evaluate);
            },
            // 编辑DM
            editDM(data) {
                // console.log(data);
                let url = '/hr/per/dep/put';
                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));
                return axios({
                    method: 'put',
                    url: `${url}`,
                    params: {
                        'cid': cid,
                    },
                    data: this.dm,
                });

            },
            // 删除DM
            deleteDM(data) {
                // console.log(data);
                let url = '/hr/per/dep/delete';
                //替换成当前的cid
                let cid = JSON.parse(window.sessionStorage.getItem("currentCid"));
                return axios({
                    method: 'delete',
                    url: `${url}`,
                    params: {
                        'cid': cid,
                        'depid': data.id,
                    }
                }).then(resp => {
                    if (resp.code == 400) {
                        Message.error({message: '操作失败！'})
                    }
                });
            },
        }
    }
</script>

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
